<template>
	<div class="cert-upload">
		<el-upload append-to-body :action="action" :headers="headers" :show-file-list="false"
			:before-upload="beforeUploadCert" :on-success="handleSuccess" :on-error="handleError">
			<el-button type="primary"><el-icon> <ele-Upload /> </el-icon>上传证书</el-button>
		</el-upload>
	</div>
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Session } from '/@/utils/storage';
import type { UploadProps } from 'element-plus';
export default defineComponent({
	emits: ['handleSuccess'],
	setup(props, { emit }) {
		const headers = {
			satoken: Session.get('token'),
		};
		const action = '/payapi/payconfig/cert/upload';
		/**
		 * 上传素材前事件
		 */
		const beforeUploadCert: UploadProps['beforeUpload'] = (rawFile) => {
			return true;
		};
		/**
		 * 上传成功事件
		 */
		const handleSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
			emit('handleSuccess', response.data);
		};
		/**
		 * 上传失败事件
		 */
		const handleError: UploadProps['onError'] = (error) => {
			ElMessage.error(error + '');
		};
		return {
			action,
			headers,
			beforeUploadCert,
			handleSuccess,
			handleError,
		};
	},
});
</script>
<style scoped>
.cert-upload {
	margin: 5px;
}
</style>
